﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Net talking</title>
<link rel="stylesheet" href="css/jquery-ui.css"></link>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
  $(function(){
    $("#dialog").dialog({width:800,width:600});
    setInterval(function(){
        $.get("ajax")
      var $msgList=$("textarea");
      $msgList.val($msgList.val()+"\r\n"+getTime());
      var msg=$msgList[0];
      msg.scrollTop=msg.scrollHeight;
    },1000);


      $("#msg").keyup(function(event){
          if(event.keyCode==13){
              $.post("message?uid="+$("uid").val(),this.val());
              this.val("");
          }
      });

      $("#uid").load("login");
  });
  
  function getTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    // add a zero in front of numbers<10
    h=checkTime(h);
    m=checkTime(m);
    s=checkTime(s);
    return h+":"+m+":"+s;
  }

  function checkTime(i)
  {
    if (i<10){
      i="0" + i
    };
    return i;
  }

</script>
<style type="text/css">
textarea {
  width:100%;
  resize: none;
}

#msg {
  width:100%;
}

table {
  width:100%;
}
</style>
</head>
<body>
  <div id="dialog" title="talking room">
    <table>
      <tr>
        <td colspan=2>
          <textarea id="show" rows="10" readonly="true"></textarea>
        </td>
      </tr>
      <tr>
          <td>
              <label id="uid">游客</label>：
          </td>
        <td>
          <input id="msg" type="text" />
        </td>

      </tr>
    </table>
    
    
  </div>
</body>
</html>